<template>
	<view>
		<view class="row1">
			<view class="head">
				<view class="list" @click="navigation = true" :class="{show : navigation}">
					找景点
				</view>
				<view class="list" @click="navigation = false" :class="{show : navigation == false}">
					找酒店
				</view>
			</view>
		</view>
		<!-- 导航 -->
		<view v-if="navigation">
			<view class="lists">
				<view class="list" v-for="(item,index) in list" :key="index" @click="router(index)">
					<view class="icon">
						<image class="img" :src="'../../static/Home/icon'+(index+1)+'.png'" mode=""></image>
					</view>
					<view class="text">
						{{item}}
					</view>
				</view>
			</view>
			<!--  其他   富同  -->
			
			<view class="row2 in" v-if="ser" @click="qh()">
				<view class="tit">
					富同度假区
				</view>
				<view class="txt">
					其他度假区<view class="image">	
						<image class="img1" src="../../static/icon/iconRight.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="row2 in" v-else @click="qh()">
				<view class="tit">
					其他度假区
				</view>
				<view class="txt">
					富同度假区<view class="image">	
						<image class="img1" src="../../static/icon/iconRight.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="row3 in " v-if="ser" >
				<view class="list " v-for="item in 2">
					<view class="head">
						<image class="img" src="../../static/wnelv/bgc.png" mode=""></image>
					</view>
					<view class="msg">
						<view class="tit">
							<view class="txt">
								第一度假村
							</view>
							<view class="money">
								￥1080/每晚
							</view>
						</view>
						<view class="address">
							<view class="">
								朝阳区,北京
							</view>
							<view class="addr">
								<view class="image">
									<image  class="img" src="../../static/wnelv/addr.png" mode=""></image>
								</view>
								<view class="">
									距离2km
								</view>
							</view>
						</view>
						<!-- 星星组件 -->
						<view class="star">
							<Star></Star>
							<view class="text">
								80条评论
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 其他度假区 -->
			<view class="row4 " v-if="ser==false">
				<view class="list flex1" v-for="(item,index) in 4" >
					<view class="left">
						<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
					</view>
					<view class="right">
						<view class="tit">
							第一度假村
						</view>
						<view class="money">
							￥200/人
						</view>
						<view class="num">
							3541人查看过
						</view>
						<view class="tag flex1">
							<view class="span span1">
								电话质询
							</view>
							<view class="span span2" @click="router(5)"> 
								查看详细
							</view>
						</view>
					</view>
					<!-- 推荐 -->
					<view class="tj">
						推荐
					</view>
				</view>
			</view>
		</view>
		<view v-if="navigation == false">
			<view class="hotel">
				<view class="hotel1">
					<view class="hotel11">
						<input type="text" value="" placeholder="找酒店"/>
					</view>
					<view class="hotel12">
						<image src="../../static/wnelv/ss.svg" mode=""></image>
					</view>
				</view>
				<view class="hotel2">
					<view class="hotel21">
						<view class="hotel211">
							选择日期
						</view>
						<view class="hotel212">
							12月3日 - 12月4日
						</view>
					</view>
					<view class="hotel22">
						<view class="hotel221">
							房间数
						</view>
						<view class="hotel222">
							1间 - 2人
						</view>
					</view>
				</view>
				<view class="row3 in " >
					<view class="list " v-for="item in 2" @click="router(4)">
						<view class="head">
							<image class="img" src="../../static/wnelv/bgc.png" mode=""></image>
						</view>
						<view class="msg">
							<view class="tit">
								<view class="txt">
									第一度假村
								</view>
								<view class="money">
									￥1080/每晚
								</view>
							</view>
							<view class="address">
								<view class="">
									朝阳区,北京
								</view>
								<view class="addr">
									<view class="image" style="width: 38rpx;height: 38rpx;">
										<image  class="img" src="../../static/wnelv/md-room.svg" mode=""></image>
									</view>
									<view class="">
										距离2km
									</view>
								</view>
							</view>
							<!-- 星星组件 -->
							<view class="star">
								<view class="row">
										<image src="../../static/wnelv/xxx.png" mode=""></image>
										<image src="../../static/wnelv/xxx.png" mode=""></image>
										<image src="../../static/wnelv/xxx.png" mode=""></image>
										<image src="../../static/wnelv/xxx.png" mode=""></image>
										<image src="../../static/wnelv/xx.png" mode=""></image>
								</view>
								<view class="text">
									80条评论
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- <u-calendar v-model="show" :mode="mode" @change="change"></u-calendar> -->
	<!-- <u-button>月落</u-button> -->
</template>

<script>
	import Star from "../../components/homeStar/homeStar.vue"
	export default {
		components:{
			Star
		},
		data() {
			return {
				navigation:true,
				ser:true,
				list: [
					'裕昌公众号', '周边景点', '旅游攻略', '最新资讯'
				],
				show: true,
				mode: 'range'
			};
		},
		methods:{
			router(index){
				if(index==0){
					uni.navigateTo({
						url:'../gzh/gzh'
					})
				}
				if(index==1){
					uni.navigateTo({
						url:'../nearby/nearby'
					})
				}
				if(index==2){
					uni.navigateTo({
						url:'../gonglue/gonglue'
					})
				}
				if(index==3){
					uni.navigateTo({
						url:'../consult/consult'
					})
				}
				if(index==4){
					uni.navigateTo({
						url:'../hotel/hotel'
					})
				}
				if(index==5){
					uni.navigateTo({
						url:'../detail/detail'
					})
				}
			},
			qh(){
				console.log(this.$u.config.v);
				if(this.ser == true){
					this.ser = false
				}else{
					this.ser = true
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.row1 {
		background-color: #FFFFFF;
		padding: 20rpx 0;

		.head {
			width: 300rpx;
			display: flex;
			margin: auto;

			.list {
				width: 50%;
				height: 80rpx;
				text-align: center;
				font-size: 36rpx;
				line-height: 80rpx;
				color: #999;
			}

			.show {
				width: 200rpx;
				background-color: #FFC45B;
				border-radius: 25rpx;
				color: #000;
			}
		}
	}

	.bor {
		box-shadow: 0px 0px 4px 2px #e2e2e2;
	}

	.lists {
		width: 90%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-bottom: 40rpx;
		padding-bottom: 20rpx;

		.icon {
			margin: auto;
			text-align: center;
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 10rpx;

		}

		.text1 {
			font-weight: 550;
		}

		.list {
			width: 20%;
			margin: 20rpx 10rpx;
			text-align: center;
			border-bottom: 6rpx solid rgba(0, 0, 0, 0);

			.icon {
				margin: auto;
				text-align: center;
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}

			.text {
				color: rgba(16, 16, 16, 100);
				font-size: 26rpx;
			}
		}

	}
	.row2{
		display: flex;
		justify-content: space-between;
		background-color: #F2AF38 ;
		height: 80rpx;
		padding: 0 30rpx;
		border-radius: 15rpx;
		.tit{
			color: rgba(255, 255, 255, 100);
			font-size: 24px;
			text-align: left;
			line-height: 80rpx;
			font-weight: 900;
		}
		.txt{
			line-height: 80rpx;
			display: flex;
			color: #999;
			.img1{
				margin-top: 29rpx;
				margin-left: 10rpx;
				width: 15rpx;
				height: 25rpx;
			}
		}
	}
	.row3{
		margin-top: 30rpx;
		padding-bottom: 60rpx;
		.head{
			width: 100%;
			height: 360rpx;
			.img{
				border-radius: 25rpx 25rpx 0 0;
			}
		}
		.msg{
			padding: 30rpx 30rpx;
			.tit{
				display: flex;
				justify-content: space-between;
				font-size: 36rpx;
				font-weight: 600;
				.money{
						font-size: 30rpx;
						line-height:50rpx;
				}
			}
			.address{
				color: #999;
				display: flex;
				.addr{
					margin-left: 40rpx;
					display: flex;
					.image{
						width:25rpx;
						height: 30rpx;
						margin: auto 0;
						margin-right: 10rpx;
					}
				}
			
			}
			.star{
				display: flex;
				color: #999;
				font-size: 28rpx;
				margin-top: 15rpx;
				.text{
					margin-left: 10rpx;
				}
			}
		}
		.list{
			margin-top: 30rpx;
			background-color: #fff;
			border-radius: 25rpx;
		}
	}
	.row4{
		margin-top: 30rpx;
		.list{
			position: relative;
			padding: 40rpx;
			border-radius: 25rpx;
			background-color: #fff;
			margin-top: 10rpx;
			.left{
				width: 260rpx;
				height: 220rpx;
			}
			.right{
				width: 60%;
				padding-left: 20rpx;
				.tit{
					font-size: 36rpx;
					
				}
				.money{
					color: #E63308;
					margin: 10rpx 0;
					font-size: 32rpx;
				}
				.num{
					width: 100%;
					text-align: right;
					color: #999999;
					font-size: 22rpx;
				}
			}
			.tag{
				margin-top: 25rpx;
				justify-content:space-around;
				.span{
					width: 140rpx;
					height: 50rpx;
					line-height: 55rpx;
					border-radius: 10rpx;
					
					font-size: 24rpx;
					text-align: center;
					font-family: Arial;
				}
				.span1{
					border: 2rpx solid rgba(255, 0, 0, 100);
					color: rgba(255, 0, 0, 100);
				}
				.span2{
					background-color: #FF8300 ;
					color: #fff;
				}
			}
			.tj{
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			color: red;
			}
		}
	}
	.hotel {
		width: 100%;
		
		.hotel1 {
			width: 90%;
			margin-left: 5%;
			display: flex;
			
			.hotel11 {
				margin-left: 20rpx;
				margin-top: 30rpx;
				width: 552rpx;
				height: 78rpx;
				line-height:40rpx;
				border-radius: 120rpx;
				background-color: rgba(255, 255, 255, 100);
				color: rgba(64, 64, 64, 100);
				font-size: 28rpx;
				box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
				padding-left: 30rpx;
				padding-top: 15rpx;
			}
			
			.hotel12 {
				width: 46px;
				height: 39px;
				line-height: 20px;
				background-color: rgba(19, 194, 194, 100);
				text-align: center;
				box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
				margin-top: 30rpx;
				margin-left: 20rpx;
				border-radius: 50%;
				
				image {
					width: 38rpx;
					height: 38rpx;
					margin-top: 20rpx;
				}
			}
		}
		.hotel2 {
			width: 90%;
			margin-left: 10%;
			display: flex;
			margin: 20rpx auto;
			
			.hotel21 {
				text-align: right;
				padding-right: 50rpx;
				margin-left: 60rpx;
				border-right: 2rpx solid #E9E9E9;
				
				.hotel211 {
					color: rgba(191, 191, 191, 100);
					font-size: 28rpx;
				}
				
				.hotel212 {
					margin-top: 10rpx;
				}
			}
			.hotel22 {
				text-align: left;
				padding-right: 30rpx;
				margin-left: 60rpx;
				
				.hotel221 {
					color: rgba(191, 191, 191, 100);
					font-size: 28rpx;
				}
				
				.hotel222 {
					margin-top: 10rpx;
				}
			}
		}
	}
	.row{
		display: flex;
		image{
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		}
	}
</style>
